<template>
    <view class="newsbox">
        <!-- 左图 右文 -->
        <view class="pic">
            <image src="/static/1.jpg" mode=""></image>
        </view>
        <!-- 文字又分上面标题，下面作者浏览量 -->
        <view class="text">
        <view class="title">
            <view class="t">
                文化中国行 | 艺术与乡村跨界交融 宜居宜业和美乡村展新貌
            </view>
        </view>
        <view class="info">
            <text>来源：</text>
            <text>央视网-赵鑫来</text>
        </view>
        </view>
    </view>
</template>

<script>
    export default {
        name:"newsbox",
        data() {
            return {
                
            };
        }
    }
</script>

<style lang="scss">
.newsbox{
    // 显示一行
    display: flex;
    // 图片样式
    .pic{
        width: 230rpx;
        height: 160rpx;
        image{
            width:100%;
            height: 100%;
        }
    }
    // 文字样式 有上下结构
    .text{
        border: 1rpx solid green;
        // 自动把剩下的填满
        flex:1;
        padding-left: 20rpx;
        display: flex;
        flex-direction: column;
        // 弹性项目以均匀的间距放置在项目被推到开始和最后一个项目被推到结束的地方
        justify-content: space-between;
                
        .title{
            font-size: 38rpx;
            color: #333;
            .t{
                // 这边给标题文字两行显示省略号处理
                text-overflow: -o-ellipsis-lastine;            
                overflow: hidden;                            //溢出内容隐藏
                text-overflow: ellipsis;                    //文本溢出部分用省略号表示
                display: -webkit-box;                        //特别显示模式
                -webkit-line-clamp: 2;                        //行数
                line-clamp: 2;
                -webkit-box-orient:vertical;                //盒子中内容竖屏排列
            }
        }
        .info{
            font-size: 26rpx;
            color: #999;
            text{
                // jianju间距
                padding-right: 30rpx;
            }
        }
    }
}
</style>